<template>
  <div>
    <el-dialog :visible="visible"
               title="溯源信息"
               v-if="traceInfo.productBase"
               @close="visible = false">
      <div class="info">
        <div class="title">基地信息</div>
        <div class="item">基地名称：{{ traceInfo.productBase.companyName }}</div>
        <div class="item">地址：{{ traceInfo.productBase.companyAddress }}</div>
        <div class="item">电话：{{ traceInfo.productBase.companyPhone }}</div>
        <div class="item">企业网址：{{ traceInfo.productBase.companyWebsite }}</div>
        <div class="item">
          营业执照：
          <div>
            <img style="width:120px;height:200px"
                 :src="traceInfo.productBase.companyLicense">
          </div>
        </div>
      </div>
      <div class="info">
        <div class="title">地块信息</div>
        <div class="item">地块名称：{{ traceInfo.area.areaName }}</div>
        <div class="item">地块号：{{ traceInfo.area.areaNumber }}</div>
        <div class="item">备注：{{ traceInfo.area.remark }}</div>
      </div>
      <div class="info">
        <div class="title">种植信息</div>
        <div class="item">种植品种：{{ traceInfo.plant.productName }}</div>
        <div class="item">种植方式：{{ traceInfo.plant.plantMethod }}</div>
        <div class="item">种植时间：{{ traceInfo.plant.plantTime }}</div>
        <div class="item">备注：{{ traceInfo.plant.remark }}</div>
      </div>
      <div class="info">
        <div class="title">施肥信息</div>
        <el-table size="mini"
                  :data="traceInfo.fertilizerUse">
          <el-table-column prop="fertilizerName"
                           label="肥料名称"></el-table-column>
          <el-table-column prop="employeeName"
                           label="施药人员"></el-table-column>
          <el-table-column prop="useTime"
                           label="施肥时间"></el-table-column>
          <el-table-column prop="remark"
                           label="备注"></el-table-column>
        </el-table>
      </div>
      <div class="info">
        <div class="title">施药信息</div>
        <el-table size="mini"
                  :data="traceInfo.agriculturalControl">
          <el-table-column prop="pesticideName"
                           label="农药名称"></el-table-column>
          <el-table-column prop="type"
                           label="农药类型"></el-table-column>
          <el-table-column prop="dosage"
                           label="农药用量"></el-table-column>
          <el-table-column prop="useReason"
                           label="使用原因"></el-table-column>
          <el-table-column prop="effect"
                           label="使用后效果"></el-table-column>
          <el-table-column prop="gmtCreate"
                           label="施药时间"></el-table-column>
          <el-table-column prop="remark"
                           label="备注"></el-table-column>
        </el-table>
      </div>
      <div class="info">
        <div class="title">采摘信息</div>
        <div class="item">产品名称：{{ traceInfo.harvest.productName }}</div>
        <div class="item">采摘人员：{{ traceInfo.harvest.employeeName }}</div>
        <div class="item">采摘方式：{{ traceInfo.harvest.yieldMethod }}</div>
        <div class="item">产量：{{ traceInfo.harvest.yield }}</div>
        <div class="item">采摘时间：{{ traceInfo.harvest.harvestTime }}</div>
        <div class="item">备注：{{ traceInfo.harvest.remark }}</div>
      </div>
      <div class="info">
        <div class="title">运输流向</div>
        <div class="item">产品名称：{{ shippingInfo.productName }}</div>
        <div class="item">销售地点：{{ shippingInfo.site }}</div>
        <div class="item">地址：{{ shippingInfo.address }}</div>
        <div class="item">运输方式：{{ shippingInfo.shippingMethod }}</div>
        <div class="item">运输工具：{{ shippingInfo.shippingTool }}</div>
        <div class="item">运输时间：{{ shippingInfo.shippingTime }}</div>
        <div class="item">运输员工：{{ shippingInfo.employee }}</div>
        <div class="item">联系电话：{{ shippingInfo.phone }}</div>
        <div class="item">备注：{{ shippingInfo.shippingTool }}</div>
      </div>
      <div class="info"
           v-if="sell">
        <div class="title">销售信息</div>
        <div class="item">销售商：{{ sell.seller }}</div>
        <div class="item">产品名称：{{ sell.productName }}</div>
        <div class="item">产品价格：{{ sell.proudctPrice }}</div>
        <div class="item">数量：{{ sell.productNum }}</div>
        <div class="item">销售金额：{{ sell.productQuota }}</div>
        <div class="item">销售员工：{{ sell.sellStaff }}</div>
        <div class="item">联系电话：{{ sell.staffPhone }}</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getShippingById } from "@/api/plant/shipping";
import { getTraceByPlantId } from "@/api/plant/trace";
export default {
  data () {
    return {
      visible: false,
      sell: {},
      traceInfo: {},
      shippingInfo: {}
    }
  },
  methods: {
    init (data) {
      this.visible = true
      if (data.traceId) {
        getShippingById(data.traceId).then(res => {
          this.shippingInfo = res.data
          if (this.shippingInfo) {
            getTraceByPlantId(data.traceId).then(res => {
              this.traceInfo = res.data
            })
          } else {
            getTraceByPlantId(data.traceId).then(res => {
              this.traceInfo = res.data
            })
          }
        })
      } else {
        this.sell = data
        getShippingById(data.shippingId).then(res => {
          this.shippingInfo = res.data
        })
        getTraceByPlantId(data.plantId).then(res => {
          this.traceInfo = res.data
        })
        console.log(this.sell, this.shippingInfo, this.traceInfo)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.info {
  border-bottom: 1px solid #000;
  padding: 5px;
}
.title {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 15px;
}
.item {
  margin: 10px 0;
  padding: 2px;
}
</style>